<template>
    <el-dialog :title="`${editRows.length ? '编辑表单配置' : '添加表单配置'}`" :visible.sync="value" :before-close="close"
        width="700px">
        <el-form label-position="left" label-width="120px" :model="formData" :rules="formRules" ref="formRef">
            <el-form-item prop="label_name" label="表单项名称">
                <el-input v-model.trim="formData.label_name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item prop="s_key" label="s_key">
                <el-input v-model.trim="formData.s_key" placeholder="请输入s_key(只能大小写字母)" />
            </el-form-item>
            <el-form-item prop="control_type" label="表单项值类型">
                <el-radio v-model="formData.control_type" :label="index" v-for="(item, index) in control_types"
                    :key="`control_type_${index}`">{{ item }}</el-radio>
            </el-form-item>
            <el-form-item prop="comment" label="说明">
                <el-input v-model.trim="formData.comment" placeholder="说明" />
            </el-form-item>
            <el-form-item prop="select_json" label="选择值" v-show="formData.control_type != 0 && formData.control_type != 3">
                <div class="mb-10 flex ali-start" v-for="(item, index) in formData.select_json" :key="'inputValue' + index">
                    <el-input autofocus v-model="item.name" @keydown.enter.native="addValues"
                        placeholder="请输入选项值"></el-input>
                    <el-button type="danger" style="margin-left: 10px;width: 40px;" @click="removeItem(index)">-</el-button>
                </div>
                <div class="flex jus-c">
                    <el-button type="primary" @click="addValues">添加新项</el-button>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="submit">{{
                editRows.length ? ('编辑' + (editRows.length > 1 ? this.current + '/' + editRows.length : '')) : '添加'
            }}</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            current: 1,
            formData: {
                label_name: "",
                s_key: "",
                control_type: 0,
                comment: "",
                select_json: [
                    {
                        name: "",
                        value: 0
                    }
                ]
            },
            formRules: {
                label_name: [
                    { required: true, message: '请填写配置项名称', trigger: ['blur'] },
                ],
                s_key: [
                    { required: true, message: '请填写s_key', trigger: ['blur'] },
                ],
                control_type: [
                    { required: true, message: '请选择配置项类型', trigger: ['blur'] }
                ],
                select_json: [
                    { required: true, message: '请填写选项值', trigger: ['blur'] }
                ]
            },
            control_types: ['输入框', '单选框', '多选款', '文本域']
        }
    },
    props: {
        value: Boolean,
        editRows: {
            type: Array,
            default: () => []
        },
    },
    watch: {
        formData:{
            deep:true,
            handler:function(){
                if(!/^[a-zA-Z]$/.test(this.formData.s_key)){
                    this.formData.s_key = this.formData.s_key.replace(/[^a-zA-Z]/g,'')
                }
            }
        },
        editRows(value) {
            if (value && value.length) {
                Object.assign(this.formData, this.editRows[0])
                this.formData.select_json = JSON.parse(this.formData.select_json)
                this.$emit('input', true)
            }
        }
    },
    methods: {
        async submit() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {

                    let cpFormData = JSON.parse(JSON.stringify(this.formData)) //deep cp
                    let { control_type, } = cpFormData

                    // 验证值
                    if (control_type == 1 || control_type == 2) {
                        cpFormData.select_json = cpFormData.select_json.filter((item) => item.name && item.name.length )
                        if (!cpFormData.select_json.length) { this.$message.error('请填写值'); return }
                    }

                    try {
                        // 编辑
                        if (this.editRows && this.editRows.length) {
                            await this.$post({
                                url: "/admin/formoption.FormOption/edit",
                                data: { ...cpFormData, ...{ option_cate_id: this.$route.query.id } },
                                loading: true,
                                successTip: true
                            })

                            if (this.current != this.editRows.length) {
                                this.current += 1
                                Object.assign(this.formData, this.editRows[this.current - 1])
                                return
                            }
                        } else {
                            //提交
                            await this.$post({
                                url: "/admin/formoption.FormOption/add",
                                data: { ...cpFormData, ...{ option_cate_id: this.$route.query.id } },
                                loading: true,
                                successTip: true,
                                noFailTip: true
                            })
                        }
                        this.close()
                        this.$emit('update')
                    } catch (err) {
                        if (err.msg == 's_key已存在') {
                            this.$message.error('配置项名称已存在')
                        }
                    }
                }
            })
        },
        removeItem(index){
            this.formData.select_json.splice(index,1)
        },
        addValues() {
            this.formData.select_json.push({
                name:"", value: this.formData.select_json.length
            })
        },
        close() {
            Object.assign(this.$data, this.$options.data())
            this.$emit('input', false)
            this.$emit('close')
            setTimeout(() => {
                this.$refs.formRef.resetFields()
            }, 0);
        }
    }
}
</script>